/*total setting*/
html, body, div, header, main, article, section, aside, footer{margin:0; padding:0;}
ul li{list-style: none;}
input, select { box-sizing: border-box; }
input, select, button { outline: none; }

/* 基本蓝调表格 */
table { border-left: 1px solid darkblue; border-top: 1px outset white;   }
table td { border-right: 1px solid white; border-bottom: 1px solid white; }
table thead td, table tr.v-table-header-row td { height: 30px; font-weight: bold; background-color: rgba(64, 99, 139, 0.8); color: white;  }
table tbody td { height: 24px; font-size: 12px; background-color: rgba(173, 173, 181, 0.4); }
table tbody tr:nth-child(even) td { background-color: rgba(152, 159, 166, 0.5); }


/* 按钮基本样式 */
button { width: 160px; height: 30px; line-height: 30px; font-size: 16px; box-sizing: border-box; padding: 0;  }
button.bluestyle { background: lightblue; color: white; text-shadow: 1px 1px 1px #222; }
button:hover { color: red; }
button.onlystyle, td > button { background: none; border: none; }

/* 通用class */
.whitespace { width: 100%; height: 30px;} /* 空白行 */
.w { width: 100%; }

/* flex 布局常用css配置 */
.flex_set{display:-webkit-flex; display: flex;}
.flex_row{display:-webkit-flex; display: flex; flex-flow: row nowrap;}
.flex_column{display:-webkit-flex; display: flex; flex-flow: column nowrap;}


.flex_around{justify-content:space-around; }
.flex_between{justify-content:space-between;}
.flex_center{justify-content: center;}
.flex_stretch{align-items: stretch;}
.flex_align_center{align-items: center;}

/*常规横排定位，arround排列，上下居中对齐*/
.flex_rr { display:-webkit-flex; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; }
/*常规横排定位，between排列，上下居中对齐*/
.flex_rb { display:-webkit-flex; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }

/*常规坚排定位，arround排列，左右居中对齐*/
.flex_cr { display:-webkit-flex; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center; }
/*常规坚排定位，between排列，左右居中对齐*/
.flex_cb { display:-webkit-flex; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; }

.flex_grow_1{flex-grow: 1;} 
.flex_grow_2{flex-grow: 2;}
.flex_grow_3{flex-grow: 3;}

.flex_shrink_1{flex-shrink: 1;}
.flex_shrink_2{flex-shrink: 2;}
.flex_shrink_3{flex-shrink: 3;}

.flex_auto{flex:auto;} /*等价于flex-grow：1；flex-shrink:1; flex-basis:auto; 即自动放大和缩小*/
.flex_none{flex:none;} /*等价于flex-grow：0；flex-shrink:0; flex-basis:auto; 即不会放大缩小*/

.flex_words_center{display:-webkit-flex; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
.flex_words_left{display:-webkit-flex; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.flex_words_right{display:-webkit-flex; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center;}
.flex_words_top{display:-webkit-flex; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start;}
.flex_words_bottom{display:-webkit-flex; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end;}